<template>
  <div style="padding: 20px">
    <Alert message="日历" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">选择日期</div>
    <div class="demoTittle2"
      >在a-date-picker组件中设置属性picker，例如：周为week，月为month等等。</div
    >
    <a-space :size="12">
      <a-date-picker v-model:value="value1" />
      <a-date-picker v-model:value="value2" picker="week" />
      <a-date-picker v-model:value="value3" picker="month" />
      <a-time-picker v-model:value="value4" show-time mode="time" />
      <a-date-picker v-model:value="value5" picker="year" />
    </a-space>
    <div class="demoTittle">日期时间段</div>
    <div class="demoTittle2">通过设置 picker 属性，指定范围选择器类型。属性show-time显示时间</div>
    <a-space :size="12"
      ><a-range-picker v-model:value="value6" />
      <a-range-picker
        v-model:value="value7"
        style="width: 400px"
        :show-time="{
          hideDisabledOptions: true,
          defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
        }"
        format="YYYY-MM-DD HH:mm:ss"
      />
    </a-space>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import { ref } from 'vue';
  import dayjs, { Dayjs } from 'dayjs';
  type RangeValue = [Dayjs, Dayjs];
  const value1 = ref<Dayjs>();
  const value2 = ref<Dayjs>();
  const value3 = ref<Dayjs>();
  const value4 = ref<Dayjs>();
  const value5 = ref<Dayjs>();
  const value6 = ref<RangeValue>();
  const value7 = ref<[Dayjs, Dayjs]>();
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
    margin-bottom: 18px;
  }

  .ant-picker .ant-picker-input > input {
    color: #444444;
  }
</style>
